<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Charts | Klorofil - Free Bootstrap Dashboard Template</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<!-- VENDOR CSS -->
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" href="css/font-awesome.min.css">
	<link rel="stylesheet" href="css/style.css">
	<link rel="stylesheet" href="css/chartist-custom.css">
	<!-- MAIN CSS -->
	<link rel="stylesheet" href="css/main.css">
	<!-- FOR DEMO PURPOSES ONLY. You should remove this in your project -->
	<link rel="stylesheet" href="css/demo.css">
	<!-- GOOGLE FONTS -->
	<link href="css/css" rel="stylesheet">
	<!-- ICONS -->
	<link rel="apple-touch-icon" sizes="76x76" href="/assets/img/apple-icon.png">
	<link rel="icon" type="image/png" sizes="96x96" href="/assets/img/favicon.png">
</head>

<body>
	<!-- WRAPPER -->
	<div id="wrapper">
		<!-- NAVBAR -->
		<nav class="navbar navbar-default navbar-fixed-top">
			<div class="brand">
				<a href="/index.html"><img src="images/logo-dark.png" alt="Klorofil Logo" class="img-responsive logo"></a>
			</div>
			<div class="container-fluid">
				<div class="navbar-btn">
					<button type="button" class="btn-toggle-fullwidth"><i class="lnr lnr-arrow-left-circle"></i></button>
				</div>
				<form class="navbar-form navbar-left">
					<div class="input-group">
						<input type="text" value="" class="form-control" placeholder="Search dashboard...">
						<span class="input-group-btn"><button type="button" class="btn btn-primary">Go</button></span>
					</div>
				</form>
				<div class="navbar-btn navbar-btn-right">
					<a class="btn btn-success update-pro" href="charts.html#downloads" title="Upgrade to Pro" target="_blank"><i class="fa fa-rocket"></i> <span>UPGRADE TO PRO</span></a>
				</div>
				<div id="navbar-menu">
					<ul class="nav navbar-nav navbar-right">
						<li class="dropdown">
							<a href="charts.html#" class="dropdown-toggle icon-menu" data-toggle="dropdown">
								<i class="lnr lnr-alarm"></i>
								<span class="badge bg-danger">5</span>
							</a>
							<ul class="dropdown-menu notifications">
								<li><a href="charts.html#" class="notification-item"><span class="dot bg-warning"></span>System space is almost full</a></li>
								<li><a href="charts.html#" class="notification-item"><span class="dot bg-danger"></span>You have 9 unfinished tasks</a></li>
								<li><a href="charts.html#" class="notification-item"><span class="dot bg-success"></span>Monthly report is available</a></li>
								<li><a href="charts.html#" class="notification-item"><span class="dot bg-warning"></span>Weekly meeting in 1 hour</a></li>
								<li><a href="charts.html#" class="notification-item"><span class="dot bg-success"></span>Your request has been approved</a></li>
								<li><a href="charts.html#" class="more">See all notifications</a></li>
							</ul>
						</li>
						<li class="dropdown">
							<a href="charts.html#" class="dropdown-toggle" data-toggle="dropdown"><i class="lnr lnr-question-circle"></i> <span>Help</span> <i class="icon-submenu lnr lnr-chevron-down"></i></a>
							<ul class="dropdown-menu">
								<li><a href="charts.html#">Basic Use</a></li>
								<li><a href="charts.html#">Working With Data</a></li>
								<li><a href="charts.html#">Security</a></li>
								<li><a href="charts.html#">Troubleshooting</a></li>
							</ul>
						</li>
						<li class="dropdown">
							<a href="charts.html#" class="dropdown-toggle" data-toggle="dropdown"><img src="images/user.png" class="img-circle" alt="Avatar"> <span>Samuel</span> <i class="icon-submenu lnr lnr-chevron-down"></i></a>
							<ul class="dropdown-menu">
								<li><a href="charts.html#"><i class="lnr lnr-user"></i> <span>My Profile</span></a></li>
								<li><a href="charts.html#"><i class="lnr lnr-envelope"></i> <span>Message</span></a></li>
								<li><a href="charts.html#"><i class="lnr lnr-cog"></i> <span>Settings</span></a></li>
								<li><a href="charts.html#"><i class="lnr lnr-exit"></i> <span>Logout</span></a></li>
							</ul>
						</li>
						<!-- <li>
							<a class="update-pro" href="#downloads/klorofil-pro-bootstrap-admin-dashboard-template/?utm_source=klorofil&utm_medium=template&utm_campaign=KlorofilPro" title="Upgrade to Pro" target="_blank"><i class="fa fa-rocket"></i> <span>UPGRADE TO PRO</span></a>
						</li> -->
					</ul>
				</div>
			</div>
		</nav>
		<!-- END NAVBAR -->
		<!-- LEFT SIDEBAR -->
		<div id="sidebar-nav" class="sidebar">
			<div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height: 95%;"><div class="sidebar-scroll" style="overflow: hidden; width: auto; height: 95%;">
				<nav>
					<ul class="nav">
						<li><a href="index.html" class=""><i class="lnr lnr-home"></i> <span>Dashboard</span></a></li>
						<li><a href="elements.html" class=""><i class="lnr lnr-code"></i> <span>Elements</span></a></li>
						<li><a href="charts.html" class="active"><i class="lnr lnr-chart-bars"></i> <span>Charts</span></a></li>
						<li><a href="panels.html" class=""><i class="lnr lnr-cog"></i> <span>Panels</span></a></li>
						<li><a href="notifications.html" class=""><i class="lnr lnr-alarm"></i> <span>Notifications</span></a></li>
						<li>
							<a href="charts.html#subPages" data-toggle="collapse" class="collapsed"><i class="lnr lnr-file-empty"></i> <span>Pages</span> <i class="icon-submenu lnr lnr-chevron-left"></i></a>
							<div id="subPages" class="collapse ">
								<ul class="nav">
									<li><a href="page-profile.html" class="">Profile</a></li>
									<li><a href="page-login.html" class="">Login</a></li>
									<li><a href="page-lockscreen.html" class="">Lockscreen</a></li>
								</ul>
							</div>
						</li>
						<li><a href="tables.html" class=""><i class="lnr lnr-dice"></i> <span>Tables</span></a></li>
						<li><a href="typography.html" class=""><i class="lnr lnr-text-format"></i> <span>Typography</span></a></li>
						<li><a href="icons.html" class=""><i class="lnr lnr-linearicons"></i> <span>Icons</span></a></li>
					</ul>
				</nav>
			</div><div class="slimScrollBar" style="width: 7px; position: absolute; top: 0px; opacity: 0.4; display: none; border-radius: 7px; z-index: 99; right: 1px; height: 789px; background: rgb(0, 0, 0);"></div><div class="slimScrollRail" style="width: 7px; height: 100%; position: absolute; top: 0px; display: none; border-radius: 7px; opacity: 0.2; z-index: 90; right: 1px; background: rgb(51, 51, 51);"></div></div>
		</div>
		<!-- END LEFT SIDEBAR -->
		<!-- MAIN -->
		<div class="main" style="min-height: 874px;">
			<!-- MAIN CONTENT -->
			<div class="main-content">
				<div class="container-fluid">
					<h3 class="page-title">Charts</h3>
					<div class="row">
						<div class="col-md-6">
							<div class="panel">
								<div class="panel-heading">
									<h3 class="panel-title">Line Chart</h3>
								</div>
								<div class="panel-body">
									<div id="demo-line-chart" class="ct-chart"><svg xmlns:ct="http://gionkunz.github.com/chartist-js/ct" width="100%" height="300px" class="ct-chart-line" style="width: 100%; height: 300px;"><g class="ct-grids"><line y1="265" y2="265" x1="50" x2="723" class="ct-grid ct-vertical"></line><line y1="229.28571428571428" y2="229.28571428571428" x1="50" x2="723" class="ct-grid ct-vertical"></line><line y1="193.57142857142856" y2="193.57142857142856" x1="50" x2="723" class="ct-grid ct-vertical"></line><line y1="157.85714285714286" y2="157.85714285714286" x1="50" x2="723" class="ct-grid ct-vertical"></line><line y1="122.14285714285714" y2="122.14285714285714" x1="50" x2="723" class="ct-grid ct-vertical"></line><line y1="86.42857142857142" y2="86.42857142857142" x1="50" x2="723" class="ct-grid ct-vertical"></line><line y1="50.71428571428572" y2="50.71428571428572" x1="50" x2="723" class="ct-grid ct-vertical"></line><line y1="15" y2="15" x1="50" x2="723" class="ct-grid ct-vertical"></line></g><g><g class="ct-series ct-series-a"><path d="M50,265L106.083,200.714L162.167,211.429L218.25,222.143L274.333,190L330.417,175.714L386.5,132.857L442.583,193.571L498.667,138.214L554.75,115L610.833,68.571L666.917,15" class="ct-line"></path><line x1="50" y1="265" x2="50.01" y2="265" class="ct-point" ct:value="200"></line><line x1="106.08333333333334" y1="200.71428571428572" x2="106.09333333333335" y2="200.71428571428572" class="ct-point" ct:value="380"></line><line x1="162.16666666666669" y1="211.42857142857144" x2="162.17666666666668" y2="211.42857142857144" class="ct-point" ct:value="350"></line><line x1="218.25" y1="222.14285714285714" x2="218.26" y2="222.14285714285714" class="ct-point" ct:value="320"></line><line x1="274.33333333333337" y1="190" x2="274.34333333333336" y2="190" class="ct-point" ct:value="410"></line><line x1="330.4166666666667" y1="175.71428571428572" x2="330.4266666666667" y2="175.71428571428572" class="ct-point" ct:value="450"></line><line x1="386.5" y1="132.85714285714286" x2="386.51" y2="132.85714285714286" class="ct-point" ct:value="570"></line><line x1="442.58333333333337" y1="193.57142857142856" x2="442.59333333333336" y2="193.57142857142856" class="ct-point" ct:value="400"></line><line x1="498.6666666666667" y1="138.21428571428572" x2="498.6766666666667" y2="138.21428571428572" class="ct-point" ct:value="555"></line><line x1="554.75" y1="115" x2="554.76" y2="115" class="ct-point" ct:value="620"></line><line x1="610.8333333333334" y1="68.57142857142858" x2="610.8433333333334" y2="68.57142857142858" class="ct-point" ct:value="750"></line><line x1="666.9166666666667" y1="15" x2="666.9266666666667" y2="15" class="ct-point" ct:value="900"></line></g></g><g class="ct-labels"><foreignobject style="overflow: visible;" x="50" y="270" width="56.083333333333336" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 56px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Jan</span></foreignobject><foreignobject style="overflow: visible;" x="106.08333333333334" y="270" width="56.083333333333336" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 56px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Feb</span></foreignobject><foreignobject style="overflow: visible;" x="162.16666666666669" y="270" width="56.08333333333333" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 56px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Mar</span></foreignobject><foreignobject style="overflow: visible;" x="218.25" y="270" width="56.08333333333334" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 56px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Apr</span></foreignobject><foreignobject style="overflow: visible;" x="274.33333333333337" y="270" width="56.08333333333334" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 56px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">May</span></foreignobject><foreignobject style="overflow: visible;" x="330.4166666666667" y="270" width="56.083333333333314" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 56px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Jun</span></foreignobject><foreignobject style="overflow: visible;" x="386.5" y="270" width="56.08333333333337" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 56px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Jul</span></foreignobject><foreignobject style="overflow: visible;" x="442.58333333333337" y="270" width="56.083333333333314" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 56px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Aug</span></foreignobject><foreignobject style="overflow: visible;" x="498.6666666666667" y="270" width="56.083333333333314" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 56px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Sep</span></foreignobject><foreignobject style="overflow: visible;" x="554.75" y="270" width="56.08333333333337" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 56px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Oct</span></foreignobject><foreignobject style="overflow: visible;" x="610.8333333333334" y="270" width="56.08333333333337" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 56px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Nov</span></foreignobject><foreignobject style="overflow: visible;" x="666.9166666666667" y="270" width="56.08333333333326" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 56px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Dec</span></foreignobject><foreignobject style="overflow: visible;" y="229.28571428571428" x="10" height="35.714285714285715" width="30"><span class="ct-label ct-vertical ct-start" style="height: 36px; width: 30px" xmlns="http://www.w3.org/2000/xmlns/">200</span></foreignobject><foreignobject style="overflow: visible;" y="193.57142857142856" x="10" height="35.714285714285715" width="30"><span class="ct-label ct-vertical ct-start" style="height: 36px; width: 30px" xmlns="http://www.w3.org/2000/xmlns/">300</span></foreignobject><foreignobject style="overflow: visible;" y="157.85714285714283" x="10" height="35.71428571428571" width="30"><span class="ct-label ct-vertical ct-start" style="height: 36px; width: 30px" xmlns="http://www.w3.org/2000/xmlns/">400</span></foreignobject><foreignobject style="overflow: visible;" y="122.14285714285714" x="10" height="35.71428571428572" width="30"><span class="ct-label ct-vertical ct-start" style="height: 36px; width: 30px" xmlns="http://www.w3.org/2000/xmlns/">500</span></foreignobject><foreignobject style="overflow: visible;" y="86.42857142857142" x="10" height="35.71428571428572" width="30"><span class="ct-label ct-vertical ct-start" style="height: 36px; width: 30px" xmlns="http://www.w3.org/2000/xmlns/">600</span></foreignobject><foreignobject style="overflow: visible;" y="50.71428571428572" x="10" height="35.714285714285694" width="30"><span class="ct-label ct-vertical ct-start" style="height: 36px; width: 30px" xmlns="http://www.w3.org/2000/xmlns/">700</span></foreignobject><foreignobject style="overflow: visible;" y="15" x="10" height="35.71428571428572" width="30"><span class="ct-label ct-vertical ct-start" style="height: 36px; width: 30px" xmlns="http://www.w3.org/2000/xmlns/">800</span></foreignobject><foreignobject style="overflow: visible;" y="-15" x="10" height="30" width="30"><span class="ct-label ct-vertical ct-start" style="height: 30px; width: 30px" xmlns="http://www.w3.org/2000/xmlns/">900</span></foreignobject></g></svg></div>
								</div>
							</div>
						</div>
						<div class="col-md-6">
							<div class="panel">
								<div class="panel-heading">
									<h3 class="panel-title">Bar Chart</h3>
								</div>
								<div class="panel-body">
									<div id="demo-bar-chart" class="ct-chart"><svg xmlns:ct="http://gionkunz.github.com/chartist-js/ct" width="100%" height="300px" class="ct-chart-bar" style="width: 100%; height: 300px;"><g class="ct-grids"><line y1="265" y2="265" x1="50" x2="723" class="ct-grid ct-vertical"></line><line y1="237.22222222222223" y2="237.22222222222223" x1="50" x2="723" class="ct-grid ct-vertical"></line><line y1="209.44444444444446" y2="209.44444444444446" x1="50" x2="723" class="ct-grid ct-vertical"></line><line y1="181.66666666666669" y2="181.66666666666669" x1="50" x2="723" class="ct-grid ct-vertical"></line><line y1="153.88888888888889" y2="153.88888888888889" x1="50" x2="723" class="ct-grid ct-vertical"></line><line y1="126.11111111111111" y2="126.11111111111111" x1="50" x2="723" class="ct-grid ct-vertical"></line><line y1="98.33333333333334" y2="98.33333333333334" x1="50" x2="723" class="ct-grid ct-vertical"></line><line y1="70.55555555555554" y2="70.55555555555554" x1="50" x2="723" class="ct-grid ct-vertical"></line><line y1="42.77777777777777" y2="42.77777777777777" x1="50" x2="723" class="ct-grid ct-vertical"></line><line y1="15" y2="15" x1="50" x2="723" class="ct-grid ct-vertical"></line></g><g><g class="ct-series ct-series-a"><line x1="78.04166666666667" x2="78.04166666666667" y1="265" y2="209.44444444444446" class="ct-bar" ct:value="200"></line><line x1="134.125" x2="134.125" y1="265" y2="159.44444444444446" class="ct-bar" ct:value="380"></line><line x1="190.20833333333334" x2="190.20833333333334" y1="265" y2="167.77777777777777" class="ct-bar" ct:value="350"></line><line x1="246.29166666666666" x2="246.29166666666666" y1="265" y2="176.11111111111111" class="ct-bar" ct:value="320"></line><line x1="302.37500000000006" x2="302.37500000000006" y1="265" y2="151.11111111111111" class="ct-bar" ct:value="410"></line><line x1="358.45833333333337" x2="358.45833333333337" y1="265" y2="140" class="ct-bar" ct:value="450"></line><line x1="414.5416666666667" x2="414.5416666666667" y1="265" y2="106.66666666666666" class="ct-bar" ct:value="570"></line><line x1="470.62500000000006" x2="470.62500000000006" y1="265" y2="153.88888888888889" class="ct-bar" ct:value="400"></line><line x1="526.7083333333334" x2="526.7083333333334" y1="265" y2="110.83333333333334" class="ct-bar" ct:value="555"></line><line x1="582.7916666666666" x2="582.7916666666666" y1="265" y2="92.77777777777777" class="ct-bar" ct:value="620"></line><line x1="638.875" x2="638.875" y1="265" y2="56.66666666666666" class="ct-bar" ct:value="750"></line><line x1="694.9583333333334" x2="694.9583333333334" y1="265" y2="15" class="ct-bar" ct:value="900"></line></g></g><g class="ct-labels"><foreignobject style="overflow: visible;" x="50" y="270" width="56.083333333333336" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 56px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Jan</span></foreignobject><foreignobject style="overflow: visible;" x="106.08333333333334" y="270" width="56.083333333333336" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 56px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Feb</span></foreignobject><foreignobject style="overflow: visible;" x="162.16666666666669" y="270" width="56.08333333333333" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 56px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Mar</span></foreignobject><foreignobject style="overflow: visible;" x="218.25" y="270" width="56.08333333333334" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 56px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Apr</span></foreignobject><foreignobject style="overflow: visible;" x="274.33333333333337" y="270" width="56.08333333333334" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 56px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">May</span></foreignobject><foreignobject style="overflow: visible;" x="330.4166666666667" y="270" width="56.083333333333314" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 56px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Jun</span></foreignobject><foreignobject style="overflow: visible;" x="386.5" y="270" width="56.08333333333337" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 56px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Jul</span></foreignobject><foreignobject style="overflow: visible;" x="442.58333333333337" y="270" width="56.083333333333314" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 56px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Aug</span></foreignobject><foreignobject style="overflow: visible;" x="498.6666666666667" y="270" width="56.083333333333314" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 56px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Sep</span></foreignobject><foreignobject style="overflow: visible;" x="554.75" y="270" width="56.08333333333337" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 56px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Oct</span></foreignobject><foreignobject style="overflow: visible;" x="610.8333333333334" y="270" width="56.08333333333337" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 56px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Nov</span></foreignobject><foreignobject style="overflow: visible;" x="666.9166666666667" y="270" width="56.08333333333326" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 56px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Dec</span></foreignobject><foreignobject style="overflow: visible;" y="237.22222222222223" x="10" height="27.77777777777778" width="30"><span class="ct-label ct-vertical ct-start" style="height: 28px; width: 30px" xmlns="http://www.w3.org/2000/xmlns/">0</span></foreignobject><foreignobject style="overflow: visible;" y="209.44444444444446" x="10" height="27.77777777777778" width="30"><span class="ct-label ct-vertical ct-start" style="height: 28px; width: 30px" xmlns="http://www.w3.org/2000/xmlns/">100</span></foreignobject><foreignobject style="overflow: visible;" y="181.66666666666669" x="10" height="27.77777777777777" width="30"><span class="ct-label ct-vertical ct-start" style="height: 28px; width: 30px" xmlns="http://www.w3.org/2000/xmlns/">200</span></foreignobject><foreignobject style="overflow: visible;" y="153.8888888888889" x="10" height="27.777777777777786" width="30"><span class="ct-label ct-vertical ct-start" style="height: 28px; width: 30px" xmlns="http://www.w3.org/2000/xmlns/">300</span></foreignobject><foreignobject style="overflow: visible;" y="126.11111111111111" x="10" height="27.77777777777777" width="30"><span class="ct-label ct-vertical ct-start" style="height: 28px; width: 30px" xmlns="http://www.w3.org/2000/xmlns/">400</span></foreignobject><foreignobject style="overflow: visible;" y="98.33333333333334" x="10" height="27.77777777777777" width="30"><span class="ct-label ct-vertical ct-start" style="height: 28px; width: 30px" xmlns="http://www.w3.org/2000/xmlns/">500</span></foreignobject><foreignobject style="overflow: visible;" y="70.55555555555554" x="10" height="27.7777777777778" width="30"><span class="ct-label ct-vertical ct-start" style="height: 28px; width: 30px" xmlns="http://www.w3.org/2000/xmlns/">600</span></foreignobject><foreignobject style="overflow: visible;" y="42.77777777777777" x="10" height="27.77777777777777" width="30"><span class="ct-label ct-vertical ct-start" style="height: 28px; width: 30px" xmlns="http://www.w3.org/2000/xmlns/">700</span></foreignobject><foreignobject style="overflow: visible;" y="15" x="10" height="27.77777777777777" width="30"><span class="ct-label ct-vertical ct-start" style="height: 28px; width: 30px" xmlns="http://www.w3.org/2000/xmlns/">800</span></foreignobject><foreignobject style="overflow: visible;" y="-15" x="10" height="30" width="30"><span class="ct-label ct-vertical ct-start" style="height: 30px; width: 30px" xmlns="http://www.w3.org/2000/xmlns/">900</span></foreignobject></g></svg></div>
								</div>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-md-6">
							<div class="panel">
								<div class="panel-heading">
									<h3 class="panel-title">Area Chart</h3>
								</div>
								<div class="panel-body">
									<div id="demo-area-chart" class="ct-chart"><svg xmlns:ct="http://gionkunz.github.com/chartist-js/ct" width="100%" height="270px" class="ct-chart-line" style="width: 100%; height: 270px;"><g class="ct-grids"><line y1="235" y2="235" x1="50" x2="714.5" class="ct-grid ct-vertical"></line><line y1="203.57142857142858" y2="203.57142857142858" x1="50" x2="714.5" class="ct-grid ct-vertical"></line><line y1="172.14285714285714" y2="172.14285714285714" x1="50" x2="714.5" class="ct-grid ct-vertical"></line><line y1="140.71428571428572" y2="140.71428571428572" x1="50" x2="714.5" class="ct-grid ct-vertical"></line><line y1="109.28571428571429" y2="109.28571428571429" x1="50" x2="714.5" class="ct-grid ct-vertical"></line><line y1="77.85714285714286" y2="77.85714285714286" x1="50" x2="714.5" class="ct-grid ct-vertical"></line><line y1="46.428571428571416" y2="46.428571428571416" x1="50" x2="714.5" class="ct-grid ct-vertical"></line><line y1="15" y2="15" x1="50" x2="714.5" class="ct-grid ct-vertical"></line></g><g><g class="ct-series ct-series-a"><path d="M50,235L50,235L105.375,178.429L160.75,187.857L216.125,197.286L271.5,169L326.875,156.429L382.25,118.714L437.625,172.143L493,123.429L548.375,103L603.75,62.143L659.125,15L659.125,235Z" class="ct-area"></path></g></g><g class="ct-labels"><foreignobject style="overflow: visible;" x="50" y="240" width="55.375" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 55px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Jan</span></foreignobject><foreignobject style="overflow: visible;" x="105.375" y="240" width="55.375" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 55px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Feb</span></foreignobject><foreignobject style="overflow: visible;" x="160.75" y="240" width="55.375" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 55px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Mar</span></foreignobject><foreignobject style="overflow: visible;" x="216.125" y="240" width="55.375" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 55px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Apr</span></foreignobject><foreignobject style="overflow: visible;" x="271.5" y="240" width="55.375" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 55px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">May</span></foreignobject><foreignobject style="overflow: visible;" x="326.875" y="240" width="55.375" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 55px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Jun</span></foreignobject><foreignobject style="overflow: visible;" x="382.25" y="240" width="55.375" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 55px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Jul</span></foreignobject><foreignobject style="overflow: visible;" x="437.625" y="240" width="55.375" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 55px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Aug</span></foreignobject><foreignobject style="overflow: visible;" x="493" y="240" width="55.375" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 55px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Sep</span></foreignobject><foreignobject style="overflow: visible;" x="548.375" y="240" width="55.375" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 55px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Oct</span></foreignobject><foreignobject style="overflow: visible;" x="603.75" y="240" width="55.375" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 55px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Nov</span></foreignobject><foreignobject style="overflow: visible;" x="659.125" y="240" width="55.375" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 55px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Dec</span></foreignobject><foreignobject style="overflow: visible;" y="203.57142857142858" x="10" height="31.428571428571427" width="30"><span class="ct-label ct-vertical ct-start" style="height: 31px; width: 30px" xmlns="http://www.w3.org/2000/xmlns/">200</span></foreignobject><foreignobject style="overflow: visible;" y="172.14285714285717" x="10" height="31.428571428571427" width="30"><span class="ct-label ct-vertical ct-start" style="height: 31px; width: 30px" xmlns="http://www.w3.org/2000/xmlns/">300</span></foreignobject><foreignobject style="overflow: visible;" y="140.7142857142857" x="10" height="31.428571428571438" width="30"><span class="ct-label ct-vertical ct-start" style="height: 31px; width: 30px" xmlns="http://www.w3.org/2000/xmlns/">400</span></foreignobject><foreignobject style="overflow: visible;" y="109.2857142857143" x="10" height="31.428571428571416" width="30"><span class="ct-label ct-vertical ct-start" style="height: 31px; width: 30px" xmlns="http://www.w3.org/2000/xmlns/">500</span></foreignobject><foreignobject style="overflow: visible;" y="77.85714285714286" x="10" height="31.42857142857143" width="30"><span class="ct-label ct-vertical ct-start" style="height: 31px; width: 30px" xmlns="http://www.w3.org/2000/xmlns/">600</span></foreignobject><foreignobject style="overflow: visible;" y="46.428571428571416" x="10" height="31.428571428571445" width="30"><span class="ct-label ct-vertical ct-start" style="height: 31px; width: 30px" xmlns="http://www.w3.org/2000/xmlns/">700</span></foreignobject><foreignobject style="overflow: visible;" y="15" x="10" height="31.428571428571416" width="30"><span class="ct-label ct-vertical ct-start" style="height: 31px; width: 30px" xmlns="http://www.w3.org/2000/xmlns/">800</span></foreignobject><foreignobject style="overflow: visible;" y="-15" x="10" height="30" width="30"><span class="ct-label ct-vertical ct-start" style="height: 30px; width: 30px" xmlns="http://www.w3.org/2000/xmlns/">900</span></foreignobject></g></svg></div>
								</div>
							</div>
						</div>
						<div class="col-md-6">
							<div class="panel">
								<div class="panel-heading">
									<h3 class="panel-title">Multiple Chart</h3>
								</div>
								<div class="panel-body">
									<div id="multiple-chart" class="ct-chart"><svg xmlns:ct="http://gionkunz.github.com/chartist-js/ct" width="100%" height="270px" class="ct-chart-line" style="width: 100%; height: 270px;"><g class="ct-grids"></g><g><g ct:series-name="series-real" class="ct-series ct-series-a"><path d="M20,186.111L82.682,142.111L145.364,149.444L208.045,156.778L270.727,134.778L333.409,125L396.091,95.667L458.773,137.222L521.455,99.333L584.136,83.444L646.818,51.667L709.5,15" class="ct-line"></path><line x1="20" y1="186.11111111111111" x2="20.01" y2="186.11111111111111" class="ct-point" ct:value="200"></line><line x1="82.68181818181819" y1="142.11111111111111" x2="82.69181818181819" y2="142.11111111111111" class="ct-point" ct:value="380"></line><line x1="145.36363636363637" y1="149.44444444444446" x2="145.37363636363636" y2="149.44444444444446" class="ct-point" ct:value="350"></line><line x1="208.04545454545453" y1="156.77777777777777" x2="208.05545454545452" y2="156.77777777777777" class="ct-point" ct:value="320"></line><line x1="270.72727272727275" y1="134.77777777777777" x2="270.73727272727274" y2="134.77777777777777" class="ct-point" ct:value="410"></line><line x1="333.4090909090909" y1="125" x2="333.41909090909087" y2="125" class="ct-point" ct:value="450"></line><line x1="396.09090909090907" y1="95.66666666666666" x2="396.10090909090906" y2="95.66666666666666" class="ct-point" ct:value="570"></line><line x1="458.77272727272725" y1="137.22222222222223" x2="458.78272727272724" y2="137.22222222222223" class="ct-point" ct:value="400"></line><line x1="521.4545454545455" y1="99.33333333333334" x2="521.4645454545455" y2="99.33333333333334" class="ct-point" ct:value="555"></line><line x1="584.1363636363636" y1="83.44444444444446" x2="584.1463636363636" y2="83.44444444444446" class="ct-point" ct:value="620"></line><line x1="646.8181818181818" y1="51.66666666666666" x2="646.8281818181817" y2="51.66666666666666" class="ct-point" ct:value="750"></line><line x1="709.5" y1="15" x2="709.51" y2="15" class="ct-point" ct:value="900"></line></g><g ct:series-name="series-projection" class="ct-series ct-series-b"><path d="M20,235L20,176.333L82.682,149.444L145.364,147L208.045,142.111L270.727,137.222L333.409,125L396.091,117.667L458.773,107.156L521.455,99.333L584.136,88.333L646.818,63.889L709.5,39.444L709.5,235Z" class="ct-area"></path></g></g><g class="ct-labels"><foreignobject style="overflow: visible;" x="20" y="240" width="62.68181818181818" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 63px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Jan</span></foreignobject><foreignobject style="overflow: visible;" x="82.68181818181819" y="240" width="62.68181818181818" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 63px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Feb</span></foreignobject><foreignobject style="overflow: visible;" x="145.36363636363637" y="240" width="62.68181818181817" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 63px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Mar</span></foreignobject><foreignobject style="overflow: visible;" x="208.04545454545453" y="240" width="62.68181818181819" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 63px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Apr</span></foreignobject><foreignobject style="overflow: visible;" x="270.72727272727275" y="240" width="62.68181818181816" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 63px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">May</span></foreignobject><foreignobject style="overflow: visible;" x="333.4090909090909" y="240" width="62.68181818181819" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 63px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Jun</span></foreignobject><foreignobject style="overflow: visible;" x="396.09090909090907" y="240" width="62.68181818181819" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 63px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Jul</span></foreignobject><foreignobject style="overflow: visible;" x="458.77272727272725" y="240" width="62.68181818181819" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 63px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Aug</span></foreignobject><foreignobject style="overflow: visible;" x="521.4545454545455" y="240" width="62.68181818181819" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 63px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Sep</span></foreignobject><foreignobject style="overflow: visible;" x="584.1363636363636" y="240" width="62.68181818181813" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 63px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Oct</span></foreignobject><foreignobject style="overflow: visible;" x="646.8181818181818" y="240" width="62.681818181818244" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 63px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Nov</span></foreignobject><foreignobject style="overflow: visible;" x="709.5" y="240" width="30" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 30px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Dec</span></foreignobject><foreignobject style="overflow: visible;" y="210.55555555555554" x="20" height="24.444444444444443" width="0"><span class="ct-label ct-vertical ct-start" style="height: 24px; width: 0px" xmlns="http://www.w3.org/2000/xmlns/">0</span></foreignobject><foreignobject style="overflow: visible;" y="186.1111111111111" x="20" height="24.444444444444443" width="0"><span class="ct-label ct-vertical ct-start" style="height: 24px; width: 0px" xmlns="http://www.w3.org/2000/xmlns/">100</span></foreignobject><foreignobject style="overflow: visible;" y="161.66666666666669" x="20" height="24.444444444444443" width="0"><span class="ct-label ct-vertical ct-start" style="height: 24px; width: 0px" xmlns="http://www.w3.org/2000/xmlns/">200</span></foreignobject><foreignobject style="overflow: visible;" y="137.22222222222223" x="20" height="24.444444444444443" width="0"><span class="ct-label ct-vertical ct-start" style="height: 24px; width: 0px" xmlns="http://www.w3.org/2000/xmlns/">300</span></foreignobject><foreignobject style="overflow: visible;" y="112.77777777777777" x="20" height="24.444444444444457" width="0"><span class="ct-label ct-vertical ct-start" style="height: 24px; width: 0px" xmlns="http://www.w3.org/2000/xmlns/">400</span></foreignobject><foreignobject style="overflow: visible;" y="88.33333333333334" x="20" height="24.44444444444443" width="0"><span class="ct-label ct-vertical ct-start" style="height: 24px; width: 0px" xmlns="http://www.w3.org/2000/xmlns/">500</span></foreignobject><foreignobject style="overflow: visible;" y="63.888888888888886" x="20" height="24.444444444444457" width="0"><span class="ct-label ct-vertical ct-start" style="height: 24px; width: 0px" xmlns="http://www.w3.org/2000/xmlns/">600</span></foreignobject><foreignobject style="overflow: visible;" y="39.44444444444446" x="20" height="24.44444444444443" width="0"><span class="ct-label ct-vertical ct-start" style="height: 24px; width: 0px" xmlns="http://www.w3.org/2000/xmlns/">700</span></foreignobject><foreignobject style="overflow: visible;" y="15" x="20" height="24.444444444444457" width="0"><span class="ct-label ct-vertical ct-start" style="height: 24px; width: 0px" xmlns="http://www.w3.org/2000/xmlns/">800</span></foreignobject><foreignobject style="overflow: visible;" y="-15" x="20" height="30" width="0"><span class="ct-label ct-vertical ct-start" style="height: 30px; width: 0px" xmlns="http://www.w3.org/2000/xmlns/">900</span></foreignobject></g></svg></div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- END MAIN CONTENT -->
		</div>
		<!-- END MAIN -->
		<div class="clearfix"></div>
		<footer>
			<div class="container-fluid">
				<p class="copyright">© 2017 <a href="charts.html#" target="_blank">Theme I Need</a>. All Rights Reserved.</p>
			</div>
		</footer>
	</div>
	<!-- END WRAPPER -->
	<!-- Javascript -->
	<script src="js/jquery.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/jquery.slimscroll.min.js"></script>
	<script src="js/chartist.min.js"></script>
	<script src="js/klorofil-common.js"></script>
	<script>
	$(function() {
		var options;

		var data = {
			labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
			series: [
				[200, 380, 350, 320, 410, 450, 570, 400, 555, 620, 750, 900],
			]
		};

		// line chart
		options = {
			height: "300px",
			showPoint: true,
			axisX: {
				showGrid: false
			},
			lineSmooth: false,
		};

		new Chartist.Line('#demo-line-chart', data, options);

		// bar chart
		options = {
			height: "300px",
			axisX: {
				showGrid: false
			},
		};

		new Chartist.Bar('#demo-bar-chart', data, options);


		// area chart
		options = {
			height: "270px",
			showArea: true,
			showLine: false,
			showPoint: false,
			axisX: {
				showGrid: false
			},
			lineSmooth: false,
		};

		new Chartist.Line('#demo-area-chart', data, options);


		// multiple chart
		var data = {
			labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
			series: [{
				name: 'series-real',
				data: [200, 380, 350, 320, 410, 450, 570, 400, 555, 620, 750, 900],
			}, {
				name: 'series-projection',
				data: [240, 350, 360, 380, 400, 450, 480, 523, 555, 600, 700, 800],
			}]
		};

		var options = {
			fullWidth: true,
			lineSmooth: false,
			height: "270px",
			low: 0,
			high: 'auto',
			series: {
				'series-projection': {
					showArea: true,
					showPoint: false,
					showLine: false
				},
			},
			axisX: {
				showGrid: false,

			},
			axisY: {
				showGrid: false,
				onlyInteger: true,
				offset: 0,
			},
			chartPadding: {
				left: 20,
				right: 20
			}
		};

		new Chartist.Line('#multiple-chart', data, options);

	});
	</script>



</body></html>